<template>
  <div style="height: 100%;width: 100%;">
        <v-head></v-head>
        <v-aside></v-aside>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <!-- <v-tag></v-tag> -->
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view v-if="isRouterAlive"></router-view>
                    </keep-alive>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
import vHead from '../components/header'
import vAside from  '../components/aside'
import bus from '../components/bus'
import { fairList } from '../http/api.js'
export default {
  name: "home",
  components: {
    vHead,vAside,
  },
  provide(){
            return{
                reload:this.reload
            }
        },
  data () {
    return {
      tagsList: [],
      collapse: false,
      isRouterAlive:true

    };
  },
  created(){
      bus.$on('collapse', msg => {
          this.collapse = msg;
      });
      // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
      bus.$on('tags', msg => {
          let arr = [];
          for(let i = 0, len = msg.length; i < len; i ++){
              msg[i].name && arr.push(msg[i].name);
          }
          this.tagsList = arr;
      })
  },
  mounted () {
    // fairList(this.ipagination)
  },
  methods: {
      reload(){
            this.isRouterAlive= false;
            this.$nextTick(()=>{
                this.isRouterAlive = true;
            });
        }
  },
};
</script>
<style >
.content-box {
        position: absolute;
        left: 220px;
        right: 0;
        top: 70px;
        /* bottom: 0; */
        padding-bottom: 30px;
        -webkit-transition: left .3s ease-in-out;
        transition: left .3s ease-in-out;
        background: #f0f0f0;
    }
    .content {
        width: auto;
        height: 100%;
        padding: 10px;
        overflow-y: hidden;
        box-sizing: border-box;

    }
    .content-collapse {
        left: 65px;
    }
</style>
